<template>
    <div>
        <div v-if="FlagHidden">
            <div class="Header">
                <span :class="FalgColor == 1 ? 'active' : ''" @click="ActiveColor(1)">仓库容量管理</span>
                <span :class="FalgColor == 2 ? 'active' : ''" @click="ActiveColor(2)">仓库货物明细</span>
                <span :class="FalgColor == 3 ? 'active' : ''" @click="ActiveColor(3)">货物分类明细</span>
                <span :class="FalgColor == 4 ? 'active' : ''" @click="ActiveColor(4)">仓库每月进出</span>
            </div>
            <div class="Contents">
                <div v-if="FalgColor === 1">
                    <p><span>该仓库总容量：{{ modelOne.total }}</span></p>
                    <p><span>该仓库使用容量：{{ modelOne.Capacity }}</span></p>
                    <p><span>该仓库剩余容量：</span><span :class="modelOne.FlgaColor ? 'span' : ''">{{ modelOne.residue }}</span>
                    </p>
                </div>
                <div v-if="FalgColor === 2">
                    <div v-if="modelTwoFlag.length > 0">
                        <div v-for="(item, index) in modelTwo" :key="index" class="ModelTwo">
                            <span>商品名称：{{ item.productName }}</span>
                            <span>商品规格：{{ item.productSpecification }}</span>
                            <span>商品数量：{{ item.productNumber }}</span>
                            <a-button type="primary" @click="ProductSee(item.productId)">查看详情</a-button>
                        </div>
                    </div>
                    <div v-else>
                        该仓库不存在任何商品
                    </div>
                </div>
                <div v-if="FalgColor === 3">
                    <div v-if="modelThreeFlag.length > 0">
                        <div class="ModelThreeLeft">
                            <div v-for="(item, index) in modelThreeText" :key="index" @click="ProductClass(item)">
                                {{ item }}
                            </div>
                        </div>
                        <div class="ModelThreeRigth" v-if="modelThree.length > 0">
                            <div v-for="(item, index) in modelThree" :key="index + item.productName">
                                <span>商品名称：{{ item.productName }}</span>
                                <span>商品规格：{{ item.productSpecification }}</span>
                                <span style="margin-right:10px;">商品数量：{{ item.productNumber }}</span>
                                <a-button type="text" @click="ProductSee(item.productId)">查看详情</a-button>
                            </div>
                        </div>
                        <div v-else class="ModelThreeRigth">
                            点击分类名查询分类包含商品
                        </div>
                    </div>
                    <div v-else>
                        该仓库不存在任何商品
                    </div>
                </div>
                <div v-if="FalgColor === 4">

                    <div>
                        <span style="margin-right:10px">切换日历查询历史月份仓库操作记录</span>
                        <a-date-picker v-model:value="times" picker="month" :locale='locale' @change="ChangeTime"
                            :format="dateFormat" :allowClear="false" />
                    </div>
                    <div class="Total">
                        <div class="TotalLeft">
                            <p :class="modelFourNum == 1 ? 'active' : ''" @click="ModelFourAcitve(1)">入库记录</p>
                            <p :class="modelFourNum == 2 ? 'active' : ''" @click="ModelFourAcitve(2)">出库记录</p>
                        </div>
                        <div class="TotalRight">
                            <div class="" v-if="modelFour.length > 0">
                                <div v-for="(item, index) in modelFour" :key="index" class="TotalRightBox">
                                    <span>商品名称{{ item.storageName }}</span>
                                    <span>操作时间{{ item.storageTime }}</span>
                                    <span>操作员工号{{ item.storageAdminId }}</span>
                                    <span>商品规格{{ item.storageVolume }}</span>
                                    <span>数量{{ item.storageNumber }}</span>
                                </div>
                            </div>
                            <div v-else class="TotalRightBox"><span style="width:100%">{{
                                parseInt(modelFourTime.split("-")[0]) }}年{{
        parseInt(modelFourTime.split("-")[1]) }}月没有{{ modelFourNum
        == 1
        ? "入库记录" : "出库记录"
    }}</span></div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div v-else class="error">
            您所查询的仓库不存在
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { StashId, StashNumberFnProductAll, StashNumberFnProductClassAll, StorageSelectTime } from "../../Axios/General";
import { area } from "../../utils/unit";
import mian from "../../stores/main";
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { Time, YearM } from "../../utils/Time";

const mains = mian()

const FalgColor = ref(1)
const FlagHidden = ref(false)
const dateFormat = "YYYY-MM"
const times = ref()
const route = useRoute()
const router = useRouter()
const modelOne = ref({
    total: "",
    Capacity: "",
    residue: "",
    FlgaColor: false
})
const modelTwo = ref([{
    productName: "",
    productSpecification: "",
    productNumber: "",
    productId: 0,
}])
const modelTwoFlag = ref([])

const modelThree = ref([{
    productName: "", productSpecification: "",
    productNumber: "",
    productId: 0,
}])
const modelThreeText = ref<string[]>([])
const modelThreeFlag = ref([])
const modelThreeContent = ref([])
const modelFourFlag = ref([{
    storageState: 0,
    storageName: "",
    storageTime: "",
    storageAdminId: "",
    storageVolume: "",
    storageNumber: ""
}])
const modelFourNum = ref(1)
const modelFour = ref([{
    storageState: 0,
    storageName: "",
    storageTime: "",
    storageAdminId: "",
    storageVolume: "",
    storageNumber: ""
}])
const modelFourTime = ref()
onMounted(async () => {
    FalgColor.value = mains.num
    await Flag1()
})
const ActiveColor = async (num) => {
    FalgColor.value = num
    mains.num = num
    await Flag1()
    if (num == 4) {
        date()
    }
}
const init = async () => {
    if (Flag()) {
        const res = await StashId({ stashId: route.query.id })
        if (res.code == 200) {
            modelOne.value.total = area(res.data.stashTotalCapacity)
            modelOne.value.Capacity = area(res.data.stashCapacity)
            let num = res.data.stashTotalCapacity - res.data.stashCapacity
            modelOne.value.residue = area(num)

            if (res.data.stashTotalCapacity * 0.8 <= res.data.stashCapacity) {
                modelOne.value.FlgaColor = true
            } else {
                modelOne.value.FlgaColor = false

            }

            FlagHidden.value = true
        } else {
            FlagHidden.value = false
        }


    }


}
const init2 = async () => {
    if (Flag()) {
        const res = await StashNumberFnProductAll({ stashId: route.query.id })
        modelTwo.value = []
        modelTwoFlag.value = []
        if (res.code == 200 && res.data.length > 0) {
            modelTwo.value = res.data
            modelTwoFlag.value = res.data
            modelTwo.value.forEach(el => {
                el.productSpecification = area(parseFloat(el.productSpecification))
            })
        }
    }
}
const init3 = async () => {
    modelThree.value.shift()
    if (Flag()) {
        const res = await StashNumberFnProductClassAll({ stashId: route.query.id })


        if (res.code == 200 && res.data && res.data.length > 0) {
            modelThreeFlag.value = res.data
            modelThreeContent.value = res.data.reduce((object, el) => {
                if (el.classificationName in object) {
                    object[el.classificationName].push(el)
                } else {
                    object[el.classificationName] = []
                    object[el.classificationName].push(el)
                }
                return object
            }, {})
            // console.log(one);
            modelThreeText.value = []
            for (const key in modelThreeContent.value) {
                modelThreeText.value.push(key)
            }

        }

    }
}
const init4 = async () => {
    if (Flag()) {


        if (!modelFourTime.value) {

            modelFourTime.value = YearM(new Date())
        }


        times.value = dayjs(modelFourTime.value, dateFormat)


        const res = await StorageSelectTime({ storageTime: new Date(modelFourTime.value), storageStashId: route.query.id })
        modelFourFlag.value = []
        if (res.code == 200 && res.data && res.data.length > 0) {
            res.data.forEach(el => {
                el.storageTime = Time(new Date(el.storageTime))
                el.storageVolume = area(parseFloat(el.storageVolume))
            });
            modelFourFlag.value = res.data
        }


    }
}
const ChangeTime = async () => {

    // modelFourTime.value
    // console.log(YearM(times.value.format()));
    modelFourTime.value = YearM(times.value.format())

    await init4()

    modelFourNum.value = 1
    date()

}
const ModelFourAcitve = (num) => {
    modelFourNum.value = num
    date()
}
const date = () => {
    if (modelFourFlag.value.length > 0) {

        let one = modelFourFlag.value.filter(el => el.storageState == modelFourNum.value)
        if (one.length > 0) {

            modelFour.value = one
        } else {
            modelFour.value = []

        }

    } else {
        modelFour.value = []
    }


}
const Flag = () => {
    if (route.query.id) {
        return true
    } else {
        return false
    }
}
const Flag1 = async () => {
    if (FalgColor.value != 1) {
        await init()
    }

    switch (FalgColor.value) {
        case 1:
            await init()
            break;
        case 2:
            await init2()
            break;
        case 3:
            await init3()
            break;
        case 4:
            await init4()
            break;
    }
}
const ProductClass = (value) => {
    // console.log(modelThreeContent.value[value]);
    modelThree.value = []
    modelThree.value = modelThreeContent.value[value]

}
const ProductSee = (num) => {
    router.push({
        name: "productDetils",
        query: {
            id: num
        }
    })
}
</script>

<style scoped lang="scss">
.error {
    font-size: 30px;
    color: red;
}

.Header {
    width: 100%;

    span {
        display: inline-block;
        border: 1px #666 solid;
        border-left: none;
        padding: 10px 8px;
        letter-spacing: 1px;
        cursor: pointer;
    }

    :first-child {
        border-left: 1px #666 solid;
    }

    .active {
        color: #fff;
        background: #000;
    }
}

.Contents {
    padding-top: 20px;

    .span {
        color: red;
    }

    .ModelTwo {
        border-bottom: 1px #666 solid;
        padding: 10px 0;

        font-size: 16px;

        span {
            display: inline-block;
            width: 200px;
        }
    }

    .ModelThreeLeft {
        width: 50%;
        display: inline-block;
        cursor: pointer;
        vertical-align: top;
        height: 200px;
        overflow: auto;
    }

    .ModelThreeRigth {
        width: 50%;
        display: inline-block;
        height: 200px;
        overflow: auto;

    }

    .Total {
        margin-top: 20px;
        display: flex;

        .TotalLeft {
            flex: 1;

            p {
                margin: 0;
                border: 1px #666 solid;
                border-bottom: none;
                padding: 10px 8px;
                text-align: center;
                border-right: none;

                cursor: pointer;
            }

            :last-child {
                border-bottom: 1px #666 solid;
            }

            .active {
                color: #fff;
                background: #000;



            }
        }

        .TotalRight {
            flex: 9;
            border: 1px #666 solid;
            height: 200px;
            overflow: auto;

            .TotalRightBox {
                padding: 10px;

                span {
                    display: inline-block;
                    width: calc(100% / 5);
                    margin-bottom: 10px;
                }
            }
        }
    }
}
</style>